<template>
    <div class="yinsi">
        <iframe src="https://app.buddyparty.xyz/supercargo-hypolydian-feedlot/subdeaconry/fug-docket/st9xjv.html"
            frameborder="0"></iframe>
        <div class="yinsi-bottom">
            <div class="yinsi-select">
                <van-checkbox v-model="$store.state.yinsiActive" shape="square" @click="doChange"></van-checkbox>
                <span class="yinsi-desc">Please read the agreement</span>
            </div>
            <div class="yinsi-btn">
                <div class="yinsi-back">CANCEL</div>
                <div class="yinsi-next" @click="toNext">CONTINUE</div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant'
export default {
    name: 'yinsi',
    data() {
        return {
        }
    },
    methods: {
        //切换小框
        doChange() {
            console.log(1, this.$store.state.xieyi.yinsiActive)
            this.$store.commit('xieyi/changeyinsi')
        },
        //跳转到下一页
        toNext() {
            if (this.$store.state.yinsiActive) {
                this.$store.commit('xieyi/addxieyi')
            } else {
                Toast('请勾选协议')
            }
        }
    }
}
</script>
<style scoped lang="less">
@a: 3.75vw;

.yinsi {
    overflow: hidden;

    iframe {
        width: 105vw;
        height: (667/@a);
    }

    .yinsi-bottom {
        .yinsi-select {
            box-sizing: border-box;

            padding-left: (10/@a);
            height: (40/@a);
            background-color: #e7e7e7;
            display: flex;

            .yinsi-desc {
                padding-top: (10/@a);
                margin-left: (10/@a);
            }
        }

        .yinsi-btn {
            display: flex;
            height: (60/@a);
            text-align: center;
            line-height: (60/@a);
            color: #fff;
            font-size: (18/@a);

            .yinsi-back {
                width: 50vw;
                background-color: #cccccc;
            }

            .yinsi-next {
                width: 50vw;
                background-color: #7459fe;
            }
        }
    }

}
</style>